<template>
  <div class="linechart lineday" style="height:28.5rem;opacity:1;" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { AjaxToken } from "@/api/common";
import { AjaxGet } from "@/api/common";
import { Loading } from "element-ui";
import "url-search-params-polyfill";

export default {
  mixins: [resize],
  props: {
    selectType: 0,
    CpnID: "",
    ChnanelId: "",
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    selectType: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",

        target: document.querySelector(".lineday"),
      });
      backstage.GetDayReconciliation(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetDayReconciliation: function (thisobj, params, loading) {
    AjaxToken(
      thisobj,
      "GetDayReconciliation",
      params,
      "post",
      function (res) {
        loading.close();
        var result = res.data.data;
        var linedata_x = result[0].linedata_x;
        var chartdatas = result;
        var legenddata = [];
        result.forEach((element) => {
          legenddata.push(element.name);
        });
        // 对话框图片
        var uploadedDataURL = "/asset/get/s/data-1547533200844-7eBMgp66l.png";
        var colors = [
          "#66CCCC",
          "#CCFF66",
          "#FF99CC",
          "#FF9999",
          "#FFCC99",
          "#FF6666",
        ];
        var seriesdata = [];
        chartdatas.forEach((element, index) => {
          seriesdata.push({
            name: element.name,
            type: "line",
            symbol: "circle",
            symbolSize: 7,
            lineStyle: {
              color: colors[index],
              shadowBlur: 12,
              shadowColor: colors[index],
              shadowOffsetX: 1,
              shadowOffsetY: 1,
            },
            itemStyle: {
              color: colors[index],
              borderWidth: 1,
              borderColor: colors[index],
            },
            label: {
              show: false,
              distance: 1,
              emphasis: {
                show: false,
                offset: [25, -2],
                backgroundColor: {
                  image: uploadedDataURL,
                },
                color: "#FFF",
                padding: [8, 20, 8, 6],
                // width:60,
                height: 36,
                formatter: function (params) {
                  var name = params.name;
                  var value = params.data;
                  var str = name + "\n数据量：" + value;
                  return str;
                },
                rich: {
                  bg: {
                    backgroundColor: {
                      image: uploadedDataURL,
                    },
                    width: 78,
                    // height:42,
                    color: "#FFF",
                    padding: [20, 0, 20, 10],
                  },
                  br: {
                    width: "100%",
                    height: "100%",
                  },
                },
              },
            },
            data: element.data,
          });
        });
        var option = {
          title: {
            text: "日对账异常率",
          },
          legend: {
            data: legenddata,
            orient: "vertical",
            left: "right",
            top: "20%",
          },
          backgroundColor: "#fff",
          grid: {
            left: "2%",
            right: "8%",
            bottom: "3%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            label: {
              show: true,
            },
          },
          xAxis: {
            boundaryGap: true, // 默认，坐标轴留白策略
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            data: linedata_x,
          },
          yAxis: [
            {
              type: "value",
              name: "比率：%",
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "rgba(33,148,246,0.2)",
                },
              },
            },
          ],
          series: seriesdata,
        };
        thisobj.chart.setOption(option);
      },
      function (err) {}
    );
  },
};
function randNum2(min, max, num) {
  if (num > max - min) {
    console.error("范围太小");
    return false;
  }

  var range = max - min,
    minV = min + 1, //实际上可以取的最小值
    arr = [],
    tmp = "";

  function GenerateANum(i) {
    for (i; i < num; i++) {
      var rand = Math.random(); //  rand >=0  && rand < 1
      tmp = Math.floor(rand * range + minV);
      // console.log('i',i,tmp);

      if (arr.indexOf(tmp) == -1) {
        arr.push(tmp);
      } else {
        GenerateANum(i);
        break;
      }

      /*for(var k in arr) {
	                if (arr[k] == tmp) {
	                    GenerateANum(i);
	                    break;
	                }
	            }
            	arr[i] = tmp;*/
    }
  }

  GenerateANum(0); //默认从0开始

  return arr;
}
</script>
<style lang="scss" scoped>
</style>
